<template>
  <a-drawer
    :width="600"
    placement="right"
    :visible="visible"
    :after-visible-change="afterVisibleChange"
    @close="onClose"
    class="form-drawer"
  >
    <div slot="title" class="ant-drawer-title">
      资方设置
    <p :style="pStyle">{{info.name}}（{{info.code}}）</p>
    </div>
    <a-alert message="配置资方分账账户" banner :style="{ marginBottom: '14px' }" />
    <a-form-model
      ref="ruleForm"
      :model="form"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      class="form-model"
    >
      <a-form-model-item
        label="资方分账接收账户："
        prop="receivablesAccount"
        :rules="{ required: true, message: '资方分账接收账户不能为空' }"
      >
        <a-input v-model="form.receivablesAccount" placeholder="请输入" allow-clear></a-input>
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 18, offset: 6 }">
        <a-button type="primary" :loading="submitLoading" @click="onSubmit"> 确认 </a-button>
      </a-form-model-item>
    </a-form-model>
  </a-drawer>
</template>

<script>
import { capitalSetAccount } from '@/api/capital'
export default {
  name: '',

  data() {
    return {
      visible: false,
      form: {
        receivablesAccount: ''
      },
      alertMsg: '同步品牌下店铺以及店铺交易数据时公共参数入参',
      alertType: 'warning',
      info: {},
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      submitLoading: false,
      pStyle: {
        fontSize: '14px',
        color: 'rgba(0,0,0,.65)',
        lineHeight: '2',
        display: 'block',
        marginBottom: '0',
        marginTop: '12px'

      },
    }
  },
  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.submitLoading = true
          capitalSetAccount(this.form).then((resp) => {
            this.submitLoading = false
            this.$notification['success']({
              message: '提示',
              description: '资方设置成功'
            })
            this.onClose()
            this.$emit('on-submit')
          })
        }
      })
    },
    typeClick(index) {
      if (this.tabsIndex != index) {
        this.tabsIndex = index
      }
    },
    afterVisibleChange(visible) {
      if (!visible) {
        this.form = {
          receivablesAccount: ''
        }
      }
    },
    onClose() {
      this.visible = false
    },
    open(record) {
      this.info = record
      this.form.id = record.id
      this.form.receivablesAccount = record.receivablesAccount
      this.visible = true
    }
  },
  components: {}
}
</script>

<style lang="less" scoped>
</style>
